<script setup>
// 利用ref获取dom

import { ref } from 'vue'
import Demo from './components/Demo.vue'

// 1.创建ref
// 2.关联ref
// 3. h3Ref.value 获取dom
const h3Ref = ref(null) //h3Ref.value = null

const handleClick = () => {
  console.log(h3Ref.value)
  h3Ref.value.style.backgroundColor = 'red'
}

const demoRef = ref(null)
const clickRef = () => {
  // console.log(demoRef.value)
  // 前提是子组件需要暴露
  demoRef.value.sayHi()
}
</script>

<template>
  <div>123</div>
  <h3 ref="h3Ref">我是大标题</h3>
  <button @click="handleClick">获取dom</button>
  <hr />
  <Demo ref="demoRef"></Demo>
  <button @click="clickRef">获取组件</button>
</template>
